<template>
  <div class="readfill">
    <v-header>
      <div slot="collect" @click="toggleCollect">
        <img :src="isFavorite? Favorited : Favorite" alt="">
      </div>
      <div slot="note" @click="shownote = true">添加笔记</div>
      <div slot="up" @click="submit" v-show="!showAnswer">提交</div>
    </v-header>

    <div class="match-con" v-show="show">
      <p class="con-tit">阅读填空</p>
      <div class="des">
        <div class="des-tit">题干,描述</div>
        <p class="des-txt">{{describe}}</p>
      </div>
      <div class="des-tip">大题内容</div>

      <div class="essay" v-html="this.article"></div>
      <!-- 判断做题  还是 做题记录 -->
      <div class="essay" v-if="!showAnswer" id="question" v-html="this.title"></div>
      <div class="essay" v-else id="record" v-html="this.title"></div>

      <div class="analyse" v-show="showAnswer">
        <p>答案解析:</p>
        <div class="detail" v-for="(item,index) in answer" :key="index">({{index+1}}) {{item}}</div>
      </div>

    </div>

    <!-- 添加笔记 -->
    <van-dialog v-model="shownote" title="复习笔记" show-cancel-button confirm-button-text="保存" :beforeClose="noteBtn">
      <textarea v-model="message" placeholder="要记点什么吗"></textarea>
    </van-dialog>

  </div>
</template>

<script>
import header from '@/components/content/header'
import api from '@/api/api'
import { Toast, Dialog } from 'vant'
import { mapGetters } from 'vuex'

export default {
  name: 'readfill',
  components: {
    "v-header":header,
    [Toast.name]: Toast,
    [Dialog.Component.name]: Dialog.Component,
  },
  data () {
    return {
      isFavorite:false,  // 是否已收藏
      Favorite:require('@/assets/collect.png'),
      Favorited:require('@/assets/collected.png'),
      prevRoute:'',
      message:'',
      describe:'',  //题干 描述
      shownote:false,
      show:false,
      target:'',  //存储点击的位置
      article:'',  // 文章内容
      answer:[],  // 解析数组
      title:'',   // 题目
      reglength:'', //匹配个数
      reglength2:'',
      form:{}
    }
  },
  created () {
    this.getMatch()
    window.change=this.change
  },
  computed: {
    ...mapGetters(['showAnswer','fillAnswer']),
  },
  beforeRouteEnter(to, from, next) {
    // console.log(from)
    next(vm => {
      vm.geturl(from.name)
    })
  },
  methods: {
    async getMatch(){
      Toast.loading({message: '加载中...', forbidClick: true});
      await api.Readfill().then(res=>{
        Toast.clear()
        this.show = true
        // console.log(res)
        this.describe = res.data.des
        this.article = res.data.article
        this.title = res.data.title
        this.answer = res.data.answer
      }).catch(error=>{
        console.log(error)
      })
      this.$nextTick(() => {
        if(!this.showAnswer){
          this.replaceLine()
        }else{
          this.replaceLine2() // 这个是做题记录的
        }
      })
    },

    // 文章下划线替换
    replaceLine(){
      let str = document.querySelector("#question").innerHTML;  // 这个是做题 的
      // console.log('文本',str)
      let reg = /[__]{2,10}/g;  //匹配下划线长度2-10
      this.reglength = str.match(reg).length   //获取匹配个数
      console.log('匹配个数',this.reglength)
      var txt = str.replace(reg,()=>{
        return `<input class="underline" value="" placeholder="请输入答案" />`
      })
      document.querySelector("#question").innerHTML = txt;
    },

    // (做题记录)文章下划线替换  然后 替换答案
    replaceLine2(){
      let recordstr = document.querySelector("#record").innerHTML;  // 这个是做题记录 的
      // console.log('文本',recordstr)
      let reg2 = /[__]{2,10}/g;  //匹配下划线长度2-10
      this.reglength2 = recordstr.match(reg2).length   //获取匹配个数
      console.log('匹配个数',this.reglength2)
      var recordtxt = recordstr.replace(reg2,()=>{
        return `<input class="underline2" value="" disabled placeholder="请输入答案" />`
      })
      document.querySelector("#record").innerHTML = recordtxt;
      // 答案替换
      for(let i=0;i<this.reglength2;i++){
        document.querySelectorAll(".underline2")[i].value=this.fillAnswer[i]
      }
    },

    // 收藏    没写返回数据给后台
    toggleCollect(){
      if( this.isFavorite ){
        this.isFavorite = false
        Toast('取消收藏')
      }else{
        this.isFavorite = true
        Toast('收藏成功')
      }
    },

    // 添加笔记
    noteBtn(action,done){
      if(action === 'cancel'){
        this.shownote = false
        done()
      }else if (action === 'confirm'){
        if(!this.message){
          Toast("请输入笔记,再保存")
          done(false)
        }else{
          console.log('阅读填空笔记:',this.message)
          this.shownote = false
          this.message = ''
          done()
        }
      }
    },

    // 提交
    submit(){
      Dialog.confirm({message: '是否提交试题?',}).then(() => {
        Toast.success('提交成功')
        setTimeout(() => {
          var label =document.querySelectorAll(".underline");
          for(let i=0;i<this.reglength;i++){
            if(label[i].value == ''){
              this.form[i] = '未作答'
            }else{
              this.form[i] =label[i].value
            }
          }
          console.log('阅读填空',this.form)
          this.$store.dispatch("fillAnswer", this.form)
          this.$router.push({path:'/home/reportblanks'})
        }, 2000);
      })
      .catch(() => {
        // 取消
      });
    },

    geturl(url){
      this.prevRoute=url;
      // console.log(this.prevRoute)
      if(url == "readtype"){
        this.$store.dispatch("showAnswer", false)
      }
    }

  },
}
</script>

<style lang="less" scoped>
.match-con{
  margin: 5px 0 40px;
  padding: 10px;
  .con-tit{font-size: 16px;color: #333;line-height: 24px;}
}
.des{
  padding: 6px;
  border: 1px dashed #bbbbbe;
  color: #666;
  margin: 5px 0;
  .des-tit{font-size: 14px;line-height: 20px;}
  .des-txt{font-size: 12px;text-align: justify;line-height: 16px;}
}
.des-tip{font-size: 16px;color: #3291F8;line-height: 24px;}
.essay{
  font-size: 16px;
  text-align: justify;
  line-height: 24px;
  color: #323232;
  margin-top: 15px;
}
textarea{
  font-size: 14px;
  width: 100%;
  white-space: pre-wrap;
  display: block;
  width: 100%;
  height: 100%;
  text-align: justify;
  box-sizing: border-box;
  border: 0;
  resize: none;
  line-height: 24px;
  padding: 10px 10px 10px 20px;
  color: #323232;
  height: 150px;
}
.analyse{
  font-size: 16px;
  color: #333;
  margin-top: 20px;
  .detail{
    text-align: justify;
    line-height: 24px;
    margin: 15px 0;
  }
}
/deep/.underline,/deep/.underline2{
  border-bottom: 1px solid #999;
  display: inline-block;
  padding: 0 10px;
  width: 70px;
  text-indent: 0;
  color: #999;
  font-size: 14px;
  height: 16px;
}
</style>
